import React, { FC, memo, useEffect, useState } from 'react';
import { history } from 'umi';
import { IHotProps } from '@/interface';
import { Empty } from '@/components';
import { HotSkeletons } from '@/skeletons';

const Hot: FC<IHotProps> = props => {
  const [showSkeletons, setShowSkeletons] = useState(true);

  const handleClick = (id: number | string) => {
    history.push({
      pathname: '/house',
      query: {
        id,
      },
    });
  };

  const currentHouses = Array.isArray(props.houses) ? props.houses : [];

  useEffect(() => {
    if (Array.isArray(props.houses) && showSkeletons) {
      setShowSkeletons(false);
    }
  }, [props.houses]);

  return (
    <div className="hot-wrap">
      <h1>最热民宿</h1>
      <div className="hot-wrap-lists">
        {showSkeletons ? (
          <HotSkeletons />
        ) : currentHouses.length > 0 ? (
          currentHouses.map(item => (
            <div
              className="hot-wrap-lists-item"
              key={item.id}
              onClick={() => handleClick(item.id)}
            >
              <img className="img" alt="img" src={item?.imgs[0]?.url} />
              <div className="title">{item.name}</div>
              <div className="info">{item.info}</div>
              <div className="price">￥{item.price}</div>
            </div>
          ))
        ) : (
          <Empty />
        )}
      </div>
    </div>
  );
};

export default memo(Hot);
